<template>
  <div class="musicList">
    <!-- 歌单信息组件 -->
    <songListDetails 
    @pushList="pushList" 
    @newList="newList" 
    @pushCollectList="pushCollectList"
    @cancelCollectList="cancelCollectList" 
    :listDetails="this.$route.query.listDetails" 
    :isCollect="isCollect"
    :isUser="listDetails.user_id == 2779271795" 
    
    :songList="songList"
    :src="userMsg.avatar_url"
    :coverSrc="`${url}${listDetails.playlist_coverUrl}`"
    >
    </songListDetails>
    <!-- @getdate="getdate" -->
    <el-menu :default-active="activeIndex" class="el-menu-demo CollectBar" mode="horizontal" text-color="#001"
      active-text-color="rgb(191, 178, 210)">
      <el-menu-item index="1">单曲</el-menu-item>
      <el-menu-item index="2">详情</el-menu-item>
    </el-menu>
    <!-- 歌曲列表标题栏 -->
    <songListRow></songListRow>
    <!-- 单条歌曲组件 -->
    <songline  :col="index" v-for="(item, index) of songList" :key="index" :music="item" :index="index"></songline>

  </div>
</template>
<script>
import songListDetails from '@/components/songListDetails.vue';
import songline from "@/components/songline.vue"
import songListRow from '@/components/songListRow.vue'
import { url } from "@/apiUrl"//引入地址
import { mapState } from 'vuex';
export default {
  components: {
    songListDetails,
    songline,
    songListRow
  },
  data() {
    return {
      activeIndex: '1',
      songList: [],//存放当前传过来的歌单里的歌曲
      isCollect: true,
      listDetails: []
    };
  },
  computed: {
    ...mapState({
      collectPL_ids: state => state.collectPL_ids,
      userMsg: state => state.userMsg,
    }),
  },
  watch:{
    '$route.query.playlist_id':function(){//监听路由里的歌单id，如果id变化说明切换了歌单，则重新获取歌曲
      this.getdate()
    }
  },
  methods: {
    getSongList(musics) {//获取所有的歌曲
      try {
        var s = {
          title: musics[0].music_name,
          author: musics[0].singer_name,
          url: `${url}/${musics[0].audio_url}`,
          pic: `${url}/${musics[0].img_url}`,
          lrc: musics[0].lyric,
          album: musics[0].album_name
        }
        this.$data.songList.push(s)
      } catch (error) {
        console.log(musics);
        console.log(error);
      }
    },
    pushList() {//处理播放全部事件
      var songList=this.songList
      for (var i in songList) {
        this.$store.commit("pushSong", songList[i])
      }
    },
    newList() {//播放歌单全部歌曲
      var songList=[]
      for(let i in this.songList){
        songList[i]=this.songList[i]
      }
      this.$store.commit("pushNewList",songList)
      this.$store.commit("getSong",this.songList[0])
    },
    pushCollectList() {//收藏该歌单
      this.$store.commit("pushCollectList",
        [this.$route.query.playlist_id, () => {
          this.$message("收藏歌单成功")
          this.isCollectPL()
          this.$store.commit("getCollectPL")
        }])
    },
    cancelCollectList() {//取消收藏该歌单
      this.$axios.post(`${url}/users/handleDel`, {
        user_id: localStorage[`qtUserId`],
        fieldValue: this.$route.query.playlist_id,
        fieldName: `playlist_id`
      }, {
        headers: {
          'Authorization': localStorage["qtUser"]
        }
      })
        .then(res => {
          if (res.status == 200) {
            this.$store.commit("cancelCollectList", [this.$route.query.playlist_id, () => {
              this.$message("取消收藏成功")
              this.isCollectPL()
              this.$store.commit("getCollectPL")
            }])
          }
        })
    },
    isCollectPL() {
      this.isCollect = true
      for (let pl_id of this.collectPL_ids) {
        console.log(pl_id.toString(), this.$route.query.playlist_id)
        if (pl_id.toString() == this.$route.query.playlist_id) {
          this.isCollect = false;
          break
        }
      }
    },
    async getsong(list){
      this.songList = []//清空歌曲，存放新歌曲
      for (var item of list) {
        await  this.$axios
              .get(`${url}/musics/musicById?music_id=${item.music_id}`, {
              })
              .then((res) => {
                console.log("即将插入新歌");
                this.getSongList(res.data.data)
              });
          }
    },
    async  getdate() {
      console.log("传过来的歌单信息", this.$route.query.listDetails);
      this.listDetails = this.$route.query.listDetails;
      await   this.$axios
        .get(`${url}/musics/getMusicByPl?playlist_id=${this.$route.query.playlist_id}`)
        .then((res) => {
          console.log("list", res.data.data);
          var list = res.data.data;
          console.log("清空歌曲，存放新歌曲",this.songList);
          this.getsong(list)
        });
      this.isCollectPL()
    },
  },
  mounted() {
    this.getdate() 
  },
  created() {
        this.url = `${url}/`
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/common.scss';

.odd {
  background-color: #bfb2d208;
}
</style>